/*把code写到#code和style标签里*/
function writeCss(prefix, code, fn){
  let domCode = document.querySelector('#code')
  let n = 0
  let id = setInterval(() => {
    n += 1
    domCode.innerHTML = Prism.highlight(prefix + code.substring(0, n), Prism.languages.css);
    styleTag.innerHTML = prefix +  code.substring(0, n)
    domCode.scrollTop = domCode.scrollHeight
    if (n >= code.length) {
      window.clearInterval(id)
      fn && fn.call()
    }
  }, 100)
}
function writeMarkdown(markdown, fn){
  let domPaper = document.querySelector('#paper>.content')
  let n = 0
  let id = setInterval(() => {
    n += 1
    domPaper.innerHTML = markdown.substring(0, n)
    domPaper.scrollTop = domPaper.scrollHeight
    if (n >= markdown.length) {
      window.clearInterval(id)
      fn && fn.call()
    }
  }, 50)
}

var css1 = `/* 
 * Hi,this is 小飞侠Pan🥳
 * 只用文字作做我介绍太单调了
 * 我就用代码来介绍吧
 * 首先准备一些样式
 */

*{
  transition: all 1s;
}
html{
  background: #eee;
}
#code{
  border: 1px solid #aaa;
  padding: 16px;
}

/* 我需要一点代码高亮 */

.token.selector{ color: #690; }
.token.property{ color: #905; }

/* 加一个呼吸效果 */

#code{
  animation: breath 0.5s infinite alternate-reverse;
}

/* 现在正式开始 */

/* 我需要一张白纸 */

#code-wrapper{
  width: 50%; left: 0; position: fixed; 
  height: 100%;
}

#paper > .content {
 display: block;
}

/* 于是我就可以在白纸上写字了，请看右边 */
`

var css2 = `
/* 接下来用一个优秀的库 marked.js
 * 把 Markdown 变成 HTML
 */



`
var md = `
# 自我介绍

我叫 潘静怡, 
2002 年 8 月出生, <br/>
就读于山西大同大学网络工程专业,
曾获校级一等奖学金, 
目前大二 <br/>
自学前端半年, 正在准备蓝桥杯, 希望可以取得名次,
希望以后可以成为一名出色的前端工程师🤟🏻 <br/>
CSDN: [CSDN博客地址](https://blog.csdn.net/weixin_52834435?type=blog) (记录了一些我的学习笔记)<br/>
个人博客: [小飞侠Pan](https://mengqiuleo.gitee.io) (基于hexo搭建, 使用butterfly主题美化)

# 技能介绍👉

- 熟悉 HTML CSS JavaScript 
- 熟悉 ES6+ 
- 熟悉 Vue.js 
- 熟悉 浏览器渲染原理 
- 熟悉使用 Git 
- 了解 数据结构与算法 
- 了解 HTTP/TCP网络协议 
- 了解前端工程化 使用过webpack前端构建工具 
- 了解 Node.js, koa中间件 


# 项目介绍

Vue仿去哪儿app
- 项目使用技术栈: Vue2, Vuex, VueRouter, Git, Webpack, stylus
- 项目收获：
  - 理解整个vue项目的流程，以及vue整个项目的各部分的划分。
    - Vue Router 实现多页面的路由
    - Vuex 多组件的数据共享
    - Axios 进行 Ajax 数据的获取
  - 移动端页面布局技巧
  - stylus编写前端样式
  - swiper组件的使用
  - 公用组件的拆分
  - 移动端适配处理
- 项目源码: [Gitee](https://gitee.com/mengqiuleo/travel)
- 项目笔记: [CSDN](https://blog.csdn.net/weixin_52834435/article/details/123059722)

# 联系方式

- QQ 1003346758
- Email 1003346758@qq.com
- 微信: real-pjyOwO

# 交换友链
- 如果希望和我交换博客的链接, 请将链接发给我(注意用标准格式哟👇🏻)
- 我的博客链接
  - name: 小飞侠Pan <br/>
    link: https://mengqiuleo.gitee.io <br/>
    avatar: https://gitee.com/mengqiuleo/images/raw/master/blog/202202252103634.jpg <br/>
    descr: 如果结果值得期待, 那就勇敢去追 <br/>

# Loving coding & Loving life ~ I’m on my way.
`
let css3 = `
/*
 * 这就是我的在线简历
 * 谢谢观看
 */
`

writeCss('', css1, ()=>{ // writeCss call the function
  createPaper(() => {
    writeMarkdown(md, ()=> {
      writeCss(css1, css2, ()=>{
        convertMarkdownToHtml(()=>{
          writeCss(css1 + css2, css3, ()=> {
            console.log('完成')
          })
        })
      })
    })
  })
})




function createPaper(fn){
  var paper = document.createElement('div') 
  paper.id = 'paper'
  var content = document.createElement('pre')
  content.className = 'content'
  paper.appendChild(content)
  document.body.appendChild(paper)
  fn && fn.call()
}

function convertMarkdownToHtml(fn){
  var div = document.createElement('div')  
  div.className = 'html markdown-body'
  div.innerHTML = marked(md)
  let markdownContainer = document.querySelector('#paper > .content')
  markdownContainer.replaceWith(div)
  fn && fn.call()
}

